<template>
  <div class="first">
        <img src="https://cdn.hterobot.com/vue/answer/image/login_bg%402x.png" style="width:100%;">
        <div style="position:absolute;top:100px;left:20px;">
            <div style="overflow:hidden; width:280px;backgroundColor:#fff;height:350px; border-radius: 20px;box-shadow: 0px 4px 10px #ccc;">
            <div class="topzi">
                <h3>测试题标题</h3>
                <h6>请认真填写以下信息以确保结果的准确性</h6>
            </div>
            <div class="bigkuang">
            <input id="kuang" type="text" placeholder="请填写姓名">
            <input id="kuang" type="text" placeholder="请填写年龄">
            <input id="kuang" type="text" placeholder="请填写电话" max="11">
            </div>
            </div>
        </div>
        <div style="position:relative;top:270px;left:20px">
            <button style="width:280px;height: 44px;background-color: #eee;font-size: 18px;color: #999;outline: none;border:0;text-align: center;line-height: 44px;">开始测试</button>
        </div>
  </div>
</template>

<script>
export default {

}
</script>

<style>
.topzi{
  margin:39px 0 0 10px;
  color: #2e2e2e;
}
.topzi h3{
    margin-bottom: 10px;
    font-size: 24px;
}
.topzi h6{
    font-size: 10px;
    margin-bottom: 20px;
}
.bigkuang{
  display: flex;
  flex-direction: column;
  align-items: center;
}
#kuang{
  margin-bottom: 20px;
  width:250px;
  height: 30px;
  outline: none;
  border:0;
  border-bottom:1px solid #eaeaea;
}
</style>